/* ---------------------------------------------------------------------- *\
  Function    : insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement()
  Description : Emulates insertAdjacentHTML(), insertAdjacentText() and 
	              insertAdjacentElement() three functions so they work with 
								Netscape 6/Mozilla
  Notes       : by Thor Larholm me@jscript.dk
\* ---------------------------------------------------------------------- */
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){
	
	HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) {
		switch (where){
		case 'beforeBegin':
			this.parentNode.insertBefore(parsedNode,this)
			break;
		case 'afterBegin':
			this.insertBefore(parsedNode,this.firstChild);
			break;
		case 'beforeEnd':
			this.appendChild(parsedNode);
			break;
		case 'afterEnd':
			if (this.nextSibling) 
				this.parentNode.insertBefore(parsedNode,this.nextSibling);
			else this.parentNode.appendChild(parsedNode);
				break;
		}
	}

	HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) {
		var r = this.ownerDocument.createRange();
		r.setStartBefore(this);
		var parsedHTML = r.createContextualFragment(htmlStr);
		this.insertAdjacentElement(where,parsedHTML)
	}


	HTMLElement.prototype.insertAdjacentText = function (where,txtStr) {
		var parsedText = document.createTextNode(txtStr)
		this.insertAdjacentElement(where,parsedText)
	}
};

var Editor = Class.create({
	initialize: function(element) {
		if (Object.isString(element)) {
			this.htmlBox = $(element) ;
		}
		else if (Object.isElement(element)){
			this.htmlBox = element ;
		}
		else {
			return (false) ;
		}
		
		this.htmlBox.hide() ;
		this.htmlBox.insertAdjacentHTML("afterEnd", "<iframe id='editorBox'></iframe>") ;
		this.editorBox = $('editorBox') ;
		
		this.editorBox.style.height = this.htmlBox.getHeight() + "px" ;
		this.editorBox.style.width = this.htmlBox.getWidth() + "px" ;
		
		this.doc = this.editorBox.contentWindow.document ;
		this.doc.open();
		this.doc.write(this.htmlBox.value);
		this.doc.close();
		
		this.doc.body.contentEditable = true;
		this.doc.designMode = "on";

		this.editorBox.setStyle("margin:0px;");
		this.editorBox.setStyle("border:1px solid #ccc;");
//		this.editorBox.contentDocument.body.style.margin = "0px;";
				
		this.makeFunction() ;
	},
	makeFunction: function () {
		
		$('btnBold').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("bold", false, false);
		});
		
		$('btnItalic').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("italic", false, false);
		});
		
		$('btnUnderline').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("underline", false, false);
		});
		
		$('btnLeft').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("justifyleft", false, false);
		});
		
		$('btnCenter').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("justifycenter", false, false);
		});
		
		$('btnRight').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("justifyright", false, false);
		});
		
		$('btnIndent').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("indent", false, false);
		});
		
		$('btnOutdent').observe("click", function (event) {
			$('editorBox').contentWindow.document.execCommand("outdent", false, false);
		}) ;
		
		$('btnChangeMode').observe("click", function (event) {
			var element = event.element();
			var editor = $('editorBox');
			var text = $('htmlBox');
			if (element.value == "Editor") {
				text.value = editor.contentWindow.document.body.innerHTML;
				editor.hide();
				text.show();
				element.value = "HTML";
			}
			else {
				editor.contentWindow.document.body.innerHTML = text.value;
				text.hide();
				editor.show();
				element.value = "Editor";
			}
		});
	}
});

